<template>
	<view class="education">
		<cu-custom isBack="true"></cu-custom>
		<header-title>
			<block slot="title">编辑教育经历</block>
			<block slot="info">从最高学历写起哦</block>
		</header-title>
		<view class="education-body">
			<education-item>
				<block slot="title">学校名称</block>
				<input slot="from" v-model="schoolInfo.educational_school" class="input"
					placeholder-class="input-placeholder" placeholder="请填写你的学校" />
			</education-item>
			<education-item>
				<block slot="title">学历</block>
				<cc-picker slot="from" :range="educationList" v-model="schoolInfo.educational_education"
					null_str="请选择你的学历">
				</cc-picker>
			</education-item>
			<education-item>
				<block slot="title">专业名称</block>
				<input slot="from" v-model="schoolInfo.educational_major" class="input"
					placeholder-class="input-placeholder" placeholder="请填写你的专业" />
			</education-item>
			<education-item>
				<block slot="title">时间段</block>
				<input @click="showPickHandle" slot="from" class="input arrow" disabled="true"
					placeholder-class="input-placeholder" placeholder="请选择时间段" :value="timeSlotArr" />
			</education-item>

			<education-item>
				<block slot="title">在校经历</block>
				<input @click="setExperienceHandle" slot="from" class="input arrow" disabled="true"
					placeholder-class="input-placeholder" placeholder="请填写在校经历" :value="schoolInfo.educational_about" />
			</education-item>

			<footer-btn @submit="nextClickHandle">
				<text slot="text">
					<block v-if="pageType=='add'">
						下一步
					</block>
					<block v-if="pageType=='update'">
						确认
					</block>
				</text>
			</footer-btn>

			<rangeDatePick :show="isShowPick" @showchange="hidePickHandle" :start="startTime" :end="endTime"
				:value="schoolInfo.educational_time" @change="pickChange" @cancel="hidePickHandle" fields="month">
			</rangeDatePick>
		</view>
	</view>
</template>

<script>
	import headerTitle from '../../components/header-title/header-title.vue';
	import educationItem from '../../components/education-item/education-item.vue';
	import rangeDatePick from '@/components/pyh-rdtpicker/pyh-rdtpicker.vue';
	import footerBtn from '../../components/footer-btn/footer-btn.vue';
	import ccPicker from '../../components/cc-picker/cc-picker.vue';
	export default {
		components: {
			headerTitle,
			educationItem,
			rangeDatePick,
			footerBtn,
			ccPicker
		},
		data() {
			return {
				schoolInfo: {
					educational_school: '',
					educational_education: '',
					educational_major: '',
					educational_time: Array(2).fill(this.$comm.formatDate("YYYY-MM")),
					educational_about: ''
				},
				startTime: this.$comm.formatDate("YYYY-MM", this.$comm.getDateByYear(-20)),
				endTime: this.$comm.formatDate("YYYY-MM", this.$comm.getDateByYear()),
				isShowPick: false,
				educationList: ['初中', '高中', '大专', '研究生'],
				pageType: 'add'
			};
		},
		onLoad(option) {
			let {
				pageType = 'add'
			} = option
			if (pageType == 'update') {
				let schoolInfo = this.$store.getters['update/getSchoolInfoData']
				this.schoolInfo = Object.assign(this.schoolInfo, schoolInfo)
			}
			this.pageType = pageType
		},
		computed: {
			timeSlotArr() {
				return this.schoolInfo.educational_time.join(" 至 ")
			}
		},
		methods: {
			showPickHandle() {
				this.isShowPick = true
			},
			hidePickHandle() {
				this.isShowPick = false
			},
			pickChange(e) {
				this.schoolInfo.educational_time = e
			},
			setExperienceHandle() {
				this.$comm.navigateTo(
					`/pages/school-experience-about/school-experience-about?val=${this.schoolInfo.educational_about}`)
				uni.$once('setContent', (e) => {
					this.schoolInfo.educational_about = e
				})
			},
			nextClickHandle() {
				let schoolInfo = JSON.parse(JSON.stringify(this.schoolInfo))
				let valLoginRes = this.$validate.validate(schoolInfo, [{
					name: 'educational_school',
					type: 'required',
					errmsg: '学校名称不能为空'
				}, {
					name: 'educational_education',
					type: 'required',
					errmsg: '学历不能为空'
				}, {
					name: 'educational_major',
					type: 'required',
					errmsg: '专业名称不能为空'
				}, {
					name: 'educational_time',
					type: 'arrlength',
					errmsg: '教育经历时间不能为空'
				}, {
					name: 'educational_about',
					type: 'required',
					errmsg: '在校经历不能为空'
				}])
				if (!valLoginRes.isOk) {
					this.$comm.errorToShow(valLoginRes.errmsg)
					return false
				}
				if (this.pageType == 'update') {
					this.$comm.navigateBack(1,()=>{
						uni.$emit('updateSchoolInfo', schoolInfo)
					})
				}else if(this.pageType == 'add'){
					this.$store.commit('add/setSchoolInfoData', [schoolInfo])
					this.$comm.redirectTo("/pages/work-experience/work-experience")
				}
			}
		}
	}
</script>

<style lang="scss">
	.input-placeholder {
		color: $font-cA7;
		font-size: 42upx;
	}

	.education {
		@include formStyle;
	}
</style>
